<script lang="ts">
    import { goto } from "$app/navigation";
    import { stringify } from "postcss";

    function routeToPage(route: string, replaceState: boolean) {
        console.log("call routeToPage ", route,replaceState);
        goto(`${route}`, { replaceState });
    }
</script>

<div class="p-4 w-full">
    <table class="table-auto border-collapse border border-slate-400 w-full">
        <thead>
            <tr>
                <th class="border border-slate-300 ...">Company Name Dow3 </th>
                <th class="border border-slate-300 ...">Ticker</th>
                <th class="border border-slate-300 ...">Last Close Price</th>
                <th class="border border-slate-300 ...">% Price Change</th>
                <th class="border border-slate-300 ...">Timeliness™</th>
                <th class="border border-slate-300 ...">Previous Timeliness™</th
                >
                <th class="border border-slate-300 ...">Safety™</th>
                <th class="border border-slate-300 ...">Target Price Range</th>
                <th class="border border-slate-300 ...">
                    Financial Strength Rating
                </th>
                <th class="border border-slate-300 ...">Stock Report</th>
                <th class="border border-slate-300 ...">Industry Analysis</th>
            </tr>
        </thead>
        <tbody>
            {#each Array(30) as _, i}
                <tr
                    tabindex={i}
                    on:click={(event) => {
                        console.log("tr click event=", JSON.stringify(event));
                        routeToPage("/company_list_universe/Detail", true);
                    }}
                    class="cursor-pointer hover:bg-rose-300"
                >
                    <td class="border border-slate-300 ...">3M Company{i}</td>
                    <td class="border border-slate-300 ...">MMM{i}</td>
                    <td class="border border-slate-300 ...">$148.60</td>
                    <td class="border border-slate-300 text-red-600">-2.95%</td>
                    <td class="border border-slate-300 ...">4</td>
                    <td class="border border-slate-300 ...">3</td>
                    <td class="border border-slate-300 ...">1</td>
                    <td class="border border-slate-300 ...">
                        $200.00 - $270.00
                    </td>
                    <td class="border border-slate-300 ...">A++</td>
                    <td class="border border-slate-300 ...">
                        PDF<i class="fa-solid fa-file-pdf" />
                    </td>
                    <td class="border border-slate-300 ...">Lock</td>
                </tr>
            {/each}
        </tbody>
    </table>
</div>
